import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

Item {
    id: base
    width: 720
    height: 480

    Rectangle {
        id: background
        color: "#ffffff"
        anchors.fill: parent


        RowLayout {
            id: header
            height: 100
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
        }

        ListView {
            id: content
            x: 8
            anchors.top: parent.top
            anchors.topMargin: 100
            anchors.right: parent.right
            anchors.rightMargin: 8
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 35
            anchors.left: parent.left
            anchors.leftMargin: 8
            model: ListModel {
                ListElement {
                    name: "Grey"
                    colorCode: "grey"
                }

                ListElement {
                    name: "Red"
                    colorCode: "red"
                }

                ListElement {
                    name: "Blue"
                    colorCode: "blue"
                }

                ListElement {
                    name: "Green"
                    colorCode: "green"
                }
            }
            delegate: Item {
                x: 5
                width: 80
                height: 40
                Row {
                    id: row1
                    spacing: 10
                    Rectangle {
                        width: 40
                        height: 40
                        color: colorCode
                    }

                    Text {
                        text: name
                        font.bold: true
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
            }
        }

        Rectangle {
            id: footer
            color: "#ffffff"
            anchors.top: content.bottom
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0

            CheckBox {
                id: checkBox1
                y: 8
                text: qsTr("All folders")
                clip: false
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 8
            }

            Text {
                id: timeInfo
                x: 599
                y: 12
                width: 150
                height: 15
                text: qsTr("")
                font.italic: true
                horizontalAlignment: Text.AlignRight
                style: Text.Normal
                verticalAlignment: Text.AlignVCenter
                font.bold: true
                textFormat: Text.RichText
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 8
                font.pixelSize: 16
            }
        }

        TextEdit {
            id: path
            y: 62
            width: 300
            height: 30
            text: qsTr("Text Edit")
            selectionColor: "#c2eaa7"
            textFormat: Text.RichText
            font.family: "Courier"
            readOnly: true
            font.pixelSize: 16
            font.bold: true
            horizontalAlignment: Text.AlignLeft
            anchors.bottom: content.top
            anchors.bottomMargin: 10
            anchors.left: header.left
            anchors.leftMargin: 8
        }

        Button {
            id: find
            y: 58
            width: 100
            height: 30
            text: qsTr("Find")
            anchors.verticalCenter: path.verticalCenter
            anchors.left: path.right
            anchors.leftMargin: 6
        }

        Button {
            id: del
            x: 274
            y: 58
            width: 150
            height: 30
            text: qsTr("Delete all")
            anchors.verticalCenter: path.verticalCenter
            anchors.right: header.right
            anchors.rightMargin: 8
            checkable: false
        }


    }
}

